import React, { useState, useEffect } from 'react';
import { Select, Input, Button, Tag, Space, Table, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as service from '../../../../api/salary.js'
import '../Record/Record.scss'
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
const { Search } = Input;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';

function Record(props: any) {
    var navigate = useNavigate()
    var [recordlist, setRecordlist] = useState([])
    useEffect(() => {
        service.metting_reservation({}).then((res) => {
            console.log(res);
            setRecordlist(res.data)
        })
    }, [])
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        id:string
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '会议名称',
            dataIndex: 'metting_name',
            key: 'metting_name',
        },
        {
            title: '会议室名称',
            dataIndex: 'room_name',
            key: 'room_name',
        },
        {
            title: '会议室时间',
            dataIndex: 'room_time',
            key: 'room_time',
        },
        {
            title: '会议状态',
            dataIndex: 'metting_state',
            key: 'metting_state',
        },
        {
            title: '预定人员',
            dataIndex: 'sure_per',
            key: 'sure_per',
        },
        {
            title: '预定时间',
            dataIndex: 'sure_time',
            key: 'sure_time',
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, record) => <a onClick={()=>{delMetting(record.id)}}>删除</a>
        },
    ];
    const data = recordlist
    var handleChange1 = (value: any) => { //选择是什么会议室
        // console.log(value);
        service.metting_shenme({ room_name:value }).then((res) => {
            // console.log(res);
            setRecordlist(res.data)
        })
    }
    var handleChange2 = (value: any) => { //选择会议状态
        // console.log(value);
        service.metting_shenme({ metting_state:value }).then((res) => {
            console.log(res);
            setRecordlist(res.data)
        })
    }
    var onSearch = () => { }
    var YuMetting = () => { //跳转到预定会议室
        navigate('/index/conference/record/reservation')
    }
    var delMetting = async (id: any) => { //删除单个会议室
        var res = await service.delete_reservation({ id })
        service.metting_reservation({}).then((res) => {
            // console.log(res);
            setRecordlist(res.data)
        })
    }
    return (
        <div className='record'>
            <div className='record-one'>
                <div className='Conference-title-left'></div>
                <h4 className='Conference-title'>会议室预定记录</h4>
            </div>
            <div className='record-two-box'>
                <span>会议室</span>
                <Select
                    placeholder="请选择"
                    style={{ width: 200 }}
                    onChange={(value) => { handleChange1(value) }}
                    options={[
                        { value: '请选择', label: '请选择' },
                        { value: '商务专用会议室', label: '商务专用会议室' },
                        { value: '设计部专用会议室', label: '设计部专用会议室' },
                        { value: '行政部专用会议室', label: '行政部专用会议室' }
                    ]}
                />
                <span>会议日期</span>
                <RangePicker
                    defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
                    className='select-date'
                />
                <span>会议状态</span>
                <Select
                    placeholder="请选择"
                    style={{ width: 220 }}
                    onChange={(value) => { handleChange2(value) }}
                    options={[
                        { value: '请选择', label: '请选择' },
                        { value: '待开始', label: '待开始' },
                        { value: '已开始', label: '已开始' }
                    ]}
                />
                <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 320 }} />
                <Button type="primary" style={{ height: 40 }} className='yuding' onClick={() => { YuMetting() }}>预定会议室</Button>
            </div>
            <Table columns={columns} dataSource={data} className='record-three' />
        </div>
    );
}

export default Record;